<template>
  <div class="home" ref="homeRef">
    <div class="nav-bar">
      <home-nav-bar></home-nav-bar>
    </div>
    <div class="banner">
      <van-swipe lazy-render :autoplay="3000" indicator-color="#ff9854">
        <van-swipe-item v-for="image in bannerList" :key="image.id">
          <img :src="getAssetURL(image.img)" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- done 位置相关和热门推荐组件 -->
    <div class="position">
      <home-search-box></home-search-box>
    </div>
    <!-- done 推荐组件 -->
    <div class="category">
      <home-categories></home-categories>
    </div>
    <!-- done 全局搜索组件  -->
    <div class="search-bar" v-if="isShowSearchBar">
      <search-bar v-model="searchValue"></search-bar>
    </div>
    <!-- done热门精选组件 -->
    <div class="content">
      <home-content></home-content>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home'
}
</script>
<script setup>
import { computed, onActivated, ref, watch } from "vue"
import homeNavBar from './components/home-nav-bar.vue'
import bannerList from "@/assets/data/banner.js"
import homeSearchBox from './components/home-search-box.vue';
import homeCategories from "./components/home-categories.vue"
import homeContent from "./components/home-content.vue"
import searchBar from "@/components/searchBar/index.vue"
import { getAssetURL } from '@/utils/load_assets'; //获取动态地址的方法
import useHomeStore from '@/stores/modules/home';
import useScroll from '@/hooks/useScroll.js'


const homeStore = useHomeStore()
// 网络请求
homeStore.getHotSuggestList()
homeStore.getCategories()
homeStore.getHouseList()

const homeRef = ref()
// 使外层的div滚动 禁止window滚动 否则每次切换路由会发生页面滚动到底的bug
const { isReachBottom, scrollTop } = useScroll(homeRef) //判断是否到底逻辑抽里成hook
watch(isReachBottom, (newVal) => {
  if (newVal) {
    homeStore.getHouseList().then(() => {
      isReachBottom.value = false
    })
  }
})

// notes 计算属性以来一个响应式数据,如果响应式数据发生改变的话计算属性重新计算的
const isShowSearchBar = computed(() => {
  return scrollTop.value > 350
})
// 封装的搜索框里面的input
const searchValue = ref('')


// 跳转回home时，保留原来的位置
onActivated(() => {
  homeRef.value?.scrollTo({
    top: scrollTop.value
  })
})
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 60px;
  box-sizing: border-box;


  .banner {
    width: 100%;

    img {
      width: 100%;
      height: 145px;
    }
  }

  .search-bar {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    padding: 16px 16px 10px;
    background-color: #fff;
  }

}
</style>